import React, { useState, useEffect } from "react";
import { Button } from "antd";
import "./Demo1.less";

const Demo = function Demo(props) {
  let [num, setNum] = useState(0),
    [x, setX] = useState(100);

  //  使用useEffect，并且不传入第二个参数
  useEffect(() => {
    // 获取最新的状态值
    console.log("ok1", num);
    // 判断是第一次渲染之前调用，还是第一次渲染之后调用,是在第一次渲染之后调用
    // console.log(document.querySelector(".num"));
  });

  //  第二个参数传入一个空数组，只在第一次渲染后会执行
  useEffect(() => {
    console.log("ok2", num);
  }, []);

  //  第二个参数传入一个有值的数组
  useEffect(() => {
    console.log("ok3", x);
  }, [num]);

  //   callback中有函数放回的时候
  useEffect(() => {
    return () => {
      // 返回的小函数，会在组件释放的时候执行
      // 获取的是上一次的状态值
      console.log("ok4", num);
    };
  });

  const handle = () => {
    setNum(num + 1);
  };

  return (
    <div className="demo">
      <span className="num">{num}</span>
      <Button type="primary" size="small" onClick={handle}>
        新增
      </Button>
    </div>
  );
};

export default Demo;
